<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/fonts/iconfont.css">
  <link rel="stylesheet" href="./assets/css/index.css">
  
</head>
<body>
 <div id="app">
  <div class="fixed-top">
    <header>
      <i class="iconfont icon-bilibili"></i>
      <div>
        <span class="iconfont icon-sousuo"></span>
        <img class="btn-login" src="./assets/images/login.png@48w_48h_1c.png" alt="">
        <img class="btn-app" src="./assets/images/navOpenApp.png" alt="">
      </div>
    </header>
    <nav>
      <span :class="index==activeIndex?'active':''" v-for="(item,index) in navList" :key="index" @click="changeNav(index)">{{item.name}}</span>
    </nav>
  </div>
  <div class="list">
    <div class="item" v-for="(item,index) in videoList" :key="index">
      <img :src="item.pic" alt="">
      <div class="count-box">
        <span>
          <i class="iconfont icon-shipin"></i>
          {{item.play}}
        </span>
        <span>
          <i class="iconfont icon-danmushu"></i>
          {{item.video_review}}
        </span>
      </div>
      <div class="title">
        {{item.title}}
      </div>
    </div>
  </div>
  <footer>
    去 bilibili APP 看更多
  </footer>
 </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    const ve =new Vue({
      el:'#app',
      data:{
        activeIndex:0,
        navList:[],
        videoList:[]
      },
      created(){
        this.initNavList()
        this.getVideo(1)
      },
      methods:{
        changeNav(i){
          this.activeIndex=i
          this.getVideo()
        },
        initNavList(){
          axios({
            method:'get',
            url:'https://www.escook.cn/channels'
          }).then(value=>{
            console.log(value);
            this.navList=value.data
          })
        },
        getVideo(navId){
          const id=navId || this.navList[this.activeIndex].id
          console.log(id);
          axios({
            methid:'get',
            url:'https://www.escook.cn/videos',
            params:{
              channel_id:id
            }
          }).then(value=>{
            console.log(value);
            this.videoList=value.data
          })
        }
      },
    })
  </script>
</body>
</html>